<template>
    <aside class="app-aside">
        <nav class="app-aside__nav">
            <template v-for="item in navList">
                <dl
                    v-if="item.children"
                    :key="item.title"
                    class="app-aside__group"
                >
                    <dt
                        v-if="item.title"
                        class="app-aside__group-title"
                    >
                        {{ item.title }}
                    </dt>
                    <dd
                        v-for="subItem in item.children"
                        :key="subItem.title"
                        class="app-aside__group-item"
                    >
                        <NavItem :item="subItem" />
                    </dd>
                </dl>

                <NavItem
                    v-else
                    :key="item.title"
                    :item="item"
                    class="app-aside__group"
                />
            </template>
        </nav>
    </aside>
</template>

<script>
import NavItem from './nav-item';

export default {
    name: 'AppAside',

    components: {
        NavItem,
    },

    props: {
        navList: {
            type: Array,
            required: true,
        },
    },
};
</script>

<style lang="scss" scoped>
.app-aside {
    display: flex;
    flex-direction: column;
    width: var(--aside-width);
    background-color: #f6f7f9;

    &__nav {
        flex: auto;
        overflow: auto;
    }

    &__group {
        margin-top: 24px;

        &-title {
            padding: 0 24px;
            height: 18px;
            color: #9DA3AC;
            font-size: 12px;
            font-weight: 500;
            line-height: 18px;
            margin-bottom: 8px;
        }

        &-item {
            margin: 0;
        }
    }
}
</style>
